﻿<p>Click this button to open a Menu.</p>
<FluentButton id="btnOpen1" Appearance="Appearance.Accent" @onclick="@(() => open = !open)">
    Open menu
</FluentButton>

<FluentMenu Anchor="btnOpen1" @bind-Open="open" @onmenuchange=OnMenuChange>
    <FluentMenuItem OnClick="@((e) => DemoLogger.WriteLine("Item 1 Clicked"))">
        Menu item 1
    </FluentMenuItem>
    <FluentMenuItem OnClick="@((e) => DemoLogger.WriteLine("Item 2 Clicked"))"
                   Checked="true">
        Menu item 2 Checked
    </FluentMenuItem>
    <FluentMenuItem OnClick="@((e) => DemoLogger.WriteLine("Item 3 Clicked"))"
                   Disabled="true">
        Menu item 3 Disabled
    </FluentMenuItem>
    <FluentMenuItem OnClick="@((e) => DemoLogger.WriteLine("Item 4 Clicked"))">
        <span slot="start"><FluentIcon Value="@(new Icons.Regular.Size24.ClipboardPaste())" Color="Color.Neutral" Slot="start" /></span>
        Menu item 4 with Icon
    </FluentMenuItem>
</FluentMenu>

<p>@status</p>

@code {
    bool open = false;
    private string status = "";

    private void OnMenuChange(MenuChangeEventArgs args)
    {
        if (args is not null && args.Value is not null)
            status = $"Item \"{args.Value}\" clicked";
    }
}
